<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 发送 AJAX 请求</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <div class="container">
        <h2 class="page-header">jQuery发送AJAX请求 </h2>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法ajax</button>
    </div>
    <script>
        $(function() {
            //发送get请求
            $('button').eq(0).click(function() {
                    $.get('http://127.0.0.1:8080/jquery-server', {
                        a: 100,
                        b: 200
                    }, function(data) {
                        console.log(data);
                    })
                })
                //发送post请求
            $('button').eq(1).click(function() {
                    $.post('http://127.0.0.1:8080/jquery-server', {
                        a: 100,
                        b: 200
                    }, function(data) {
                        console.log(data);
                    }, 'json')
                })
                //通用方法
            $('button').eq(2).click(function() {
                $.ajax({
                    //url
                    url: 'http://127.0.0.1:8080/jquery-server',
                    //参数
                    data: {
                        a: 100,
                        b: 100
                    },
                    //请求类型
                    type: 'GET',
                    //响应体结果
                    dataType: 'json',
                    //成功回调
                    success: function(data) {
                        console.log(data);
                    },
                    //超时时间
                    timeout: 2000,
                    //失败回调（超时、网络异常）
                    error: function() {
                        console.log("请求失败")
                    },
                    //头信息
                    Headers: {
                        c: 300,
                        d: 400
                    }
                })
            })
        })
    </script>
</body>

</html>